<template>
  <div class="FooterMusic">
    <!-- 左边 -->
    <div class="FooterLeft" @click="updateDetailShow">
      <img :src="playList[playListIndex].al.picUrl" alt="" />
      <div>
        <p>{{ playList[playListIndex].name }}</p>
        <span>横滑可以切换上下首哦</span>
      </div>
    </div>

    <!-- 右边 -->
    <div class="footerRight">
      <!-- 播放 -->
      <div class="icon bofang">
        <img src="@/assets/img/播放(1).svg" alt="" @click="play" v-if="isbtnShow" />
        <img src="@/assets/img/播放状态.svg" alt="" @click="play" v-else />
      </div>
      <!-- 更多图标 -->
      <div class="icon liebiao">
        <img src="@/assets/img/列表.svg" alt="" />
      </div>
    </div>

    <!-- 播放 controls:打开播放显示-->
    <!-- ref:属性用于，快速找到响应的标签,通过this.$refs 来找到标签，可以快速操作属性 -->
    <audio ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`"></audio>

    <!-- 弹出层（歌词详情） -->
    <van-popup v-model:show="detailShow" position="right" :style="{ height: '100%', width: '100%' }">
      <!-- 将显示的歌曲信息传递给子组件 -->
      <MusicDetail :musicList="playList[playListIndex]" :play="play" :isbtnShow="isbtnShow" :addDuration="addDuration"></MusicDetail>
    </van-popup>
  </div>
</template>

<script>
// 引入 mapState
import { mapState, mapMutations } from 'vuex'
// 引入 MusicDetail 组件，方便 弹出层使用
import MusicDetail from '@/components/item/MusicDetail.vue'

export default {
  data() {
    return {
      interVal: 0,
    }
  },
  // 计算属性
  computed: {
    //  解构赋值，mapState映射器参数必须是数组或对象
    ...mapState(['playList', 'playListIndex', , 'isbtnShow', 'currentTime', 'detailShow']),
  },
  // 生命周期,也main渲染完时，执行
  mounted() {
    // 查看传进来的值
    // console.log(this.$refs)
    this.$store.dispatch('getLyric', this.playList[this.playListIndex].id)
    // 调用处理歌词定时器函数
    this.updateTime()
  },
  // 生命周期，页面更新后
  updated() {
    // 页面更新后，将歌曲数据传递过去，调用 getLyric 函数，通过 歌曲 id
    this.$store.dispatch('getLyric', this.playList[this.playListIndex].id)
    // 调用 操作进度条总时长的函数
    this.addDuration()
  },
  // 方法
  methods: {
    // 用于控制 播放按钮的播放与暂停
    play: function () {
      // 如果音乐暂停,点击播放
      if (this.$refs.audio.paused) {
        // 播放
        this.$refs.audio.play()
        this.upataIsbtnShow(false)
        // 播放时，触发定时器
        this.updateTime()
      } else {
        // 暂停
        this.$refs.audio.pause()
        this.upataIsbtnShow(true)
        // 暂停时，清除定时器
        clearInterval(this.interVal)
      }
    },
    // 添加总时长
    addDuration: function () {
      this.updateDuration(this.$refs.audio.duration)
    },
    // 歌词当前时间，使用定时器
    updateTime() {
      this.interVal = setInterval(() => {
        this.updateCurrentTime(this.$refs.audio.currentTime)
      }, 1000)
    },
    // 解构 vuex 中的 mutations 属性，一定不能写在 计算属性里面
    ...mapMutations(['upataIsbtnShow', 'updateDetailShow', 'updateCurrentTime', 'updateDuration']),
  },
  // 侦听器
  watch: {
    // 监听索引
    playListIndex: function () {
      //监听下标，如果下标发生了改变，就自动播放音乐
      // autoplay，自动播放音乐，（audio 标签自带的属性）
      this.$refs.audio.autoplay = true
      // 判断是否是播放状态
      if (this.$refs.audio.paused) {
        //如果是暂停状态，点击播放，改变图标
        this.upataIsbtnShow(false)
      }
    },

    // 监听播放列表
    playList: function () {
      // 判断是否暂停状态，如果是暂停状态就播放音乐
      if (this.isbtnShow) {
        // 播放音乐
        this.$refs.audio.autoplay = true
        // 改变图标的状态为：播放
        this.upataIsbtnShow(false)
      }
    },
  },
  // 注册组件
  components: {
    MusicDetail,
  },
}
</script>

<style lang="less" scoped>
.FooterMusic {
  width: 41.504rem;
  height: 3rem;
  background-color: rgb(255, 255, 255);
  // 固定定位
  position: fixed;
  bottom: 0;
  border: 1px solid rgb(183, 178, 178);
  z-index: 999;
  // 弹性布局
  display: flex;
  padding: 0.2rem;
  // justify-content: space-between;
  // justify-content: center;
  justify-content: flex-start;
  // 左边
  .FooterLeft {
    width: 35%;
    height: 100%;
    // 弹性布局
    display: flex;
    justify-content: space-around;
    align-content: center;
    img {
      width: 2.5rem;
      // margin-left: 1rem;
      margin-right: 1rem;
      // border-radius:
      // 图片圆角
      border-radius: 50%;
    }
  }

  // 右边
  .footerRight {
    // 弹性布局
    display: flex;
    height: 100%;
    justify-content: space-between;
    // justify-content: center;
    // position: relative;
    // right: -4.5rem;
    margin-left: 5.8rem;
    img {
      width: 1.8rem;
      // height: 2.5rem;
      // padding-left: 1rem;
      margin-right: 0.3rem;
      margin-top: 0.5rem;
    }
  }
}
</style>
